<template>
  <div class="page-navbar main">
    <div class="container">
            <section class="finance-list">
               <div class="padding" v-for="(orderData, i) in orderDataList" v-bind:key="i">
                   <div class="flex-col">
                       <div class="trade-name flex-row flex-between">
                           <div class="trade-tab">
                               <div class="title" >{{orderData.fuser.frealName.substring(0,1)}}</div>
                            <div class="order-name">{{orderData.fuser.frealName}}</div>
                           </div>
                           <div class="wc">成交{{orderData.fuser.otcTimes}}单|成交率{{orderData.fuser.otcSuccessRate?orderData.fuser.otcSuccessRate:"100%"}}</div>
                       </div>
                       <div class="trade-limit flex-row flex-between">
                           <div>限额：{{orderData.minAmount}}-{{orderData.maxAmount}} USDT</div>
                           <div>7.09 CNY</div>
                       </div>
                       <div class="trade-number">数量：{{orderData.amount - orderData.successAmount - orderData.frozenAmount}} USDT</div>
                       <div class="trade-type flex-row flex-between">
                           <div class="img" >
                            <img src="../../assets/weixin.png" >
                             <img src="../../assets/shape.png">
                           </div>
                           <div class="button">购买</div>
                       </div>
                   </div>
               </div>
            </section>
    </div>
    <div class="add">
        <router-link to="poster"><img src="../../assets/addOtc.png" ></router-link>
    </div>
</div>
</template>

<script>
export default {
    name:'deal',
    data() {
    return {
      selected: '1',
          orderDataList:[]
        };
    
    },
       mounted() { console.log('dfds')
           //this.getSession();
          this.getOtcList()
       },
     methods: {
     
           getSession () {
      this.$http.post('v1/session?'+ new Date().getTime(), {func:""}).then((res) => {
        
      })
    },
     getOtcList(){
          console.log('dfds')
       this.$http.post('v1/getOtcList?', {page: 1,pageSize: 10}).then((res) => {
           let data=res.data;
           let fid;
            if (data.code == 200) {
                    for (var i = 0; i < data.data.length ; i++) {
                        if(data.data[i].fShortName=="OMNI-USDT"){
                            fid=data.data[i].fid;
                        }
                    }
            }
            
               this.getOrders(fid)
      })
    },
     getOrders(fid) {
         let id=1;
            this.$http.post('v1/listOtcOrders?cid='+fid+'&type='+id, ).then((res)=>{
                  let data=res.data;
                 if (data.code == 200) {
                    let list = data.data;
                    let len = list.length;
                  
                    for (let i = 0; i < len; i++) {
                        let order = list[i];
                        if  (order.type == 0) {
                       this.orderDataList.push(order);
                        // pay_area = order.otcOrder.type = '<em>以下是卖家的收款方式</em>' + payWay;
                        }else if(order.type == 1){
                             order = list[i];
                             this.orderDataList.push(order)
                        }
                    }
                       console.log( this.orderDataList)
                }
            })
        }
     },
}
</script>
<style scoped>  
.page-finance .page-navbar .finance-tabs  {
    height: 48px;
    color: #8c9fad;
    position: relative;
    font-size: 32px;
    -ms-flex: 1;
    flex: 1;
    font-weight: 700;
}
.add{
    position: fixed;
    bottom: 50px;
    right: 40px;
    z-index: 9;
}
.add img{
    width: 100px;
    height: 100px;
}
.tab .img{
    width: 40px;
    height: 40px;
    position: relative;
    right: 20px;
}
.page-finance .page-navbar .order-name{
    margin-left: 20px;
    line-height: 40px;
}
.main .buy span {
    text-align: center;
    width: 150px;
}
.flex-content{
      display: -ms-flexbox;
    display: flex;
    justify-content: center;
}
 .tab{
display: flex;
background:rgba(255,255,255,1);
height: 100px;
border:1px solid #e7ebee
}
.active{
    width: 150px;
    color: #3381FF;
    border-bottom:2px solid rgba(51,129,255,1);;
}
.main .buy {
    width: 50%;
    height: 100px;
    line-height: 100px;
}
.button{
    width:143px;
height:50px;
background:#3381FF;
border-radius:4px;
position: relative;
bottom: 20px;
text-align: center;
line-height: 50px;
color: #fff;
}
.wc{
    color: #999999
}
    .flex-row{
        display: flex;
        flex-direction: row
    }
    .flex-between{
        justify-content: space-between;
    }
    .finance-list{
            width: 94%;
            margin: 0 auto;
    }
     section.finance-list .padding {
    margin-top: 20px;
    margin-bottom: 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-top: 22px;
      background:rgba(255,255,255,1);
box-shadow:0px 3px 16px 0px rgba(14,33,44,0.15);
border-radius:4px;
padding-left: 15px;
padding-right: 15px;
}
.exchange{
    height: 80px;
    line-height: 80px;
    font-weight:500;
    font-size:32px;
    margin-left: 40px;
}
    .flex-col{
        height: 220px;
        flex-direction: column;
        display: flex;
        width: 100%;
    }
    section.finance-list .trade-name{
        height: 60px;
    }
    .trade-tab{
        width: 30%;
        display: flex;
    }
      section.finance-list .trade-name .title{
        background: #7DAFFF;
        border-radius: 50%;
        width: 40px;
        text-align: center;
        line-height: 40px;
        height: 40px;
    }
    section.finance-list .trade-limit{
        height: 60px;
        color: #182146
    }
    section.finance-list .trade-type{
        height: 50px;
    }
    section.finance-list .trade-number{
        height: 50px;
    }
    .page-navbar .mint-tab-item{
        font-size: 32px;
    }
</style>